<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	</head>
	<script>
	window.onload = function() {
		if(navigator.userAgent.toLowerCase().indexOf('msie') > -1){
			$(".pagebreak").addClass("pagebreakclass");
		}
		$('#emailPrintForm').submit(
			function() {
				$(".error").hide();
				var hasError = false;
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				
				var emailAddresses = $("#to").val().split(";");

				$.each(emailAddresses,
					function(index) {
						var emailaddressVal = emailAddresses[index];
						if (emailaddressVal != null && emailaddressVal != ''){
							emailaddressVal = $.trim(emailaddressVal);
						}
						if (emailaddressVal == '') {
							$("#to").after('<span class="error"><font color="red">Please enter your email address.</font></span>');
							hasError = true;
						}
						else if (!emailReg.test(emailaddressVal)) {
							$("#to").after('<span class="error"><font color="red">Enter a valid email address.</font></span>');
							hasError = true;
						}
						if (hasError == true) {
						
							return false;
						}
						if (emailaddressVal != null && emailaddressVal != ''){
							emailaddressVal = $.trim(emailaddressVal);
							emailAddresses[index] = $.trim(emailaddressVal);
						}
					});
				return (!hasError);

			});
			
			$('#print-button').click(
				function () {
					$("#printDisplay").hide();
					window.print();
					$("#printDisplay").show();
			});
			
			var overlayIndex = 0;
			$("div[id^='overlay-']").each(function(){
				
				var width  = $('#image-' + overlayIndex).width();
				var height = $('#image-td-' + overlayIndex).height();
			   	
			   	$(this).css("left", (width/2 - 220/2) + "px");				   	
			   	$(this).css("top", (height/2 - 36/2) + "px");				   	
			   
			   	overlayIndex += 1;
			});

		};
		
</script>
	<style>
.rounded {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid;
}

.comment {
	margin: 0px;
	padding: 0px;
	float: right;
}

.pagebreakclass {
	page-break-after: always;
	width:900px;
}

.pagebreak{
	page-break-inside: avoid;
	width:900px;
}
</style>

	<body>
	
			<form id="emailPrintForm" name="emailPrintForm" action="send" method="post">
			<table width="900px" id="printarea">
				<tr id="printDisplay">
					<td class="rounded" style="width: 200px; border: 3px solid; border-width: thin; padding: 20px;">
						<div align="center">
							<input id="print-button" type="Button" value="Print" />
						</div>
					</td>
					<td class="rounded" style="width: 700px; vertical-align: top; border: 3px solid; border-width: thin; padding: 20px">
						<div>
							<div>
								<b>To: (Separate multiple email addresses with semi-colon.)</b>
								<span id="error"></span>
							</div>
							<div>
								<input id="to" type="text" style="width: 100%" name="toAddresses" />
							</div>
							<div>
								<b>From:</b>
							</div>
							<div>
								<input id="from" type="text" style="width: 100%" name="from" />
							</div>
							
							<div>
								<b>Subject:</b>
							</div>
							<div>
								<input type="text" style="width: 100%" name="subject" value="Emailing preview..." />
							</div>
							<div>
								<b>Body:</b>
							</div>
							<div>
								<textarea style="width: 100%; height: 200px" name="body"></textarea>
							</div>
							<br />
							<div>
								<input name="sendAsHtml" type="checkbox" checked />
								Send as HTML
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input id="submit" type="submit" value="Send" />
							</div>
							<br>
							
						</div>
					</td>
				</tr>
				</table>
				<c:forEach var="emailPrintData" items="${emailPrintDataList}" varStatus="count">

				<p class="pagebreak">
				<table id="printarea" width="900px">
					<tr>
						<td colspan="2">
							<table width="900px" border="0">

								<tr >
									<input type="hidden" name="assetId-${count.index}" value="${emailPrintData.assetId}"/>
									<td id="image-td-${count.index}">

										<div style="position: relative; left: 20px; top: 181px; font-size: large; color: red; border: 0px none; margin: 0px; padding: 0px;" id="overlay-${count.index }">
											<img id="overlay" src="images/watermark-220.png"">
										</div>
										<img id="image-${count.index}" src="<c:out escapeXml="false" value="${emailPrintData.imageUrl}" />">
									</td>
									<td align="right" style="height: 100%; width: 100%;">
										<div style="padding-top: 20px; width: 300px; height: 100%" align="right">
											<div align="right"><b>My Comments</b></div>
											<textarea class="comment" name="comment-${count.index}" style="height: 350px; width: 300px"></textarea>
										</div>
									</td>
								</tr>
							</table> 
						</td>
					<tr>
						<td colspan="2">
							<table border="0">
								<c:forEach var="entry" items="${emailPrintData.metadataMap}" varStatus="iCount">
									<c:set var="trimVal" value="${fn:trim(entry.value)}" />
									<c:if test="${fn:length(trimVal)>0}">
										<tr>
											<td style="width: 200px; align: left; vertical-align:top">
												<input type="hidden" name="field-${count.index}:${iCount.index}" value="<c:out value="${entry.key}" />">
												<b><c:out value="${entry.key}" />:</b>
											</td>
											<td style="width: 700px; align: left">
												<input type="hidden" name="value-${count.index}:${iCount.index}" value="<c:out value="${fn:escapeXml(entry.value)}" />">
												<c:out value="${entry.value}" />
											</td>
										</tr>
									</c:if>
								</c:forEach>
							</table>
						</td>
					</tr>
					<tr>
					<td colspan="2"><hr COLOR="green"></td>
					</tr>
				</table></p>
				</c:forEach>
			</form>
	</body>
</html>